<template>
	<view class="content">
		<!-- 健康百科encyclopedia -->
		<view
			class="card"
			v-for="item in encyclopediaList"
			:key="item.id"
			@click="article(item.id)"
		>
			<view class="card-left">
				<image :src="item.image"></image>
			</view>
			<view class="card-right">
				<text class="title">{{ item.title }}</text>
				<view class="author">
					<text>{{ item.author }}</text>
					<text>{{ item.creationTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, onUnmounted } from 'vue'
import {
		onLoad
	} from '@dcloudio/uni-app';
import { encyclopediaApi } from '@/api/nucleicAcidApi'
let encyclopediaList = reactive([])
let article = (id) => {
	console.log(id)
	uni.navigateTo({
		url: `/pages/encyclopedia/articleDetail/articleDetail?id=${id}`
	})
}

onMounted(async () => {
	let res = await encyclopediaApi()
	if (res.data.code == 0) {
		console.log('成功！')
		console.log(12, res.data.data.list)
		encyclopediaList.push(...res.data.data.list)
		
	}
})

</script>

<style lang="less">
.content {
	margin: 60rpx 30rpx;

	.card {
		display: flex;
		margin: 20rpx 0;
		border: 1px solid #e6f1ff;
		border-radius: 10rpx;
		display: flex;
		.card-left {
			margin: 20rpx;
			background-color: #e6f1ff;
			width: 240rpx;
			height: 160rpx;
			border-radius: 10rpx;
			image{
				width: 240rpx;
				height: 160rpx;
			}
		}
		.card-right {
			width: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-right: 10rpx;
			.title {
				font-size: 30rpx;
				// word-wrap: break-word;
			}
			.author {
				font-size: 25rpx;
				text {
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>
